import React from 'react';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/toolbox';
import 'echarts/lib/component/markPoint';
import 'echarts/lib/component/markLine';


class EchartCurve extends React.Component {
  componentDidMount() {
    const { id } = this.props;
    // 初始化
    const myChart = echarts.init(document.getElementById(id));
    // 绘制图表
    myChart.setOption( {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        
        xAxis: [
            {
                type: 'category',
                data: [ '1', '2', '3', '4', '5', '6',
            '7', '8', '9','10','11',
            '12', '13', '14', '15', '16', '17',
            '18', '19', '20', '21', '22', '23','24','25','26','27','28','29','30'],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '费用',
                min: 0,
                max: 40,
                interval: 5,
                axisLabel: {
                    formatter: '{value} 万元'
                }
            }
        ],
        series: [
            {
                name:'费用',
                type:'bar',
                data:[
                    16.39, 
                    16.09, 
                    15.55, 
                    14.42, 
                    13.20, 
                    12.34, 
                    24.47, 
                    31.70, 
                    36.22, 
                    38.02, 
                    38.62, 
                    37.73, 
                    35.26, 
                    35.48, 
                    36.73, 
                    37.30, 
                    37.08, 
                    36.19, 
                    34.34, 
                    32.32, 
                    30.14, 
                    26.57, 
                    20.90, 
                    18.73,
                    36.19, 
                    34.34, 
                    32.32, 
                    30.14, 
                    26.57, 
                    20.90, 
                    18.73 ]
            }
        ]
    });
}

render() {
    const {id}=this.props;
    return (
      <div id={id} style={{ width: '100%', minHeight:'300px' }} />
    );
}
}

export default EchartCurve;
